<template>
	<div>
        <Table 
        ref="table"
        highlight-row 
        :loading="loading" 
        :columns="columns" 
        :data="data"
        class="m-t-10"></Table>
        <Page 
        :total="total"
        :page-size="param.length"
        show-sizer 
        show-total 
        show-elevator 
        class="m-t-10" 
        @on-change="changePage" 
        @on-page-size-change="changePageSize"
        
        ></Page>
    </div>
</template>
<style>
    .m-t-10{margin-top: 10px;}
</style>
<script>
	import {Table,Page} from 'iview';
    
	export default{
        props : {
            url :{
                type:String,
            },
            header:{
                type:Array,
            },
            async:{
                type:Boolean,
                default : true,
            },
        },
		components:{
            Table,
            Page,
        },
        data () {
            return {
                columns: [],
                data:[],
                loading : true,
                total : 0,
                param:{
                    page : 1,
                    length : 40,
                },
                //删除表格行标记
                tableRowDel : false,
            }
        },
        methods:{
            tableData(param){
                var params = Object.assign(this.param,param);
                this.loading = true;
                //检测删除最后页数据,将页码跳转至当前页面前一页
                if(this.tableRowDel==true){
                    var delPage = Math.ceil((this.total-1)/this.param.length);
                    if(delPage<this.param.page){
                        this.param.page = delPage;
                    }
                }
                this.Axios.Table(this.url,params)
                .then(res =>{
                    if(!res) return false;
                    this.data = res.data.result;
                    this.loading = false;
                    this.total = res.data.total;
                })
                this.tableRowDel = false;
            },
            changePage(page){
                this.param.page = page;
                this.tableData(this.param);
            },
            changePageSize(length){
                this.param.page = 1;
                this.param.length = length;
                this.tableData(this.param);
            },
            init(){
                this.columns = this.header;
                this.tableData(this.param);
            },
        },
        created : function(){
            if(this.async){
                this.init(); 
            }
        },
	}
</script>